<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<title>vue-toast-plugin</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script src="../node_modules/vue/dist/vue.js"></script>
	<script src="../dist/vue-toast-plugin.js"></script>
	<style type="text/css">
		body,div,section,p{
			margin: 0;
		    padding: 0;
		    border: 0;
		    font-size: 100%;
		    font: inherit;
		    vertical-align: baseline;
		}
		.main{
			text-align: center;
		}
		.main a{
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div id="app" class="main">
		<h2>vue-toast for mibile</h2>
		<div class="form-group row">
			<a class="btn btn-primary" href="javascript:;" @click="toast">默认toast</a>
		</div>
		<div class="form-group row">
			<a class="btn btn-info" href="javascript:;" @click="toast2">5秒后关闭toast</a>
		</div>
		<div class="form-group row">
			<a class="btn btn-success" href="javascript:;" @click="toast3">关闭toast后，执行回调</a>
		</div>
	</div>
	<script>
		new Vue({
		el:"#app",
		mounted:function(){
			this.$toast.show("测试一下");
		},
		methods:{
			toast:function(){
				this.$toast.show("当前点击了标签");
			},
			toast2:function(){
				this.$toast.show("当前点击了标签",{
					duration:5000
				});
			},
			toast3:function(){
				this.$toast.show("当前点击了标签", () => {
					alert("这里是回调函数")
				});
			},
		}
	})
	</script>
</body>
</html>